/**
 * 仪表板页面
 */
import React from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Row, Col, Statistic, Progress, Table, Tag } from 'antd';
import {
  MailOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  ClockCircleOutlined,
  RiseOutlined
} from '@ant-design/icons';

const Dashboard: React.FC = () => {
  // 模拟数据
  const recentTasks = [
    {
      key: '1',
      name: '月度营销邮件',
      status: 'completed',
      recipients: 1250,
      success: 1200,
      failed: 50,
      createTime: '2024-01-15 10:30:00',
    },
    {
      key: '2',
      name: '产品更新通知',
      status: 'running',
      recipients: 800,
      success: 650,
      failed: 10,
      createTime: '2024-01-15 14:20:00',
    },
    {
      key: '3',
      name: '客户满意度调研',
      status: 'pending',
      recipients: 500,
      success: 0,
      failed: 0,
      createTime: '2024-01-15 16:00:00',
    },
  ];

  const columns = [
    {
      title: '任务名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap = {
          completed: { color: 'success', text: '已完成', icon: <CheckCircleOutlined /> },
          running: { color: 'processing', text: '发送中', icon: <ClockCircleOutlined /> },
          pending: { color: 'default', text: '待发送', icon: <ClockCircleOutlined /> },
          failed: { color: 'error', text: '失败', icon: <CloseCircleOutlined /> },
        };
        const config = statusMap[status as keyof typeof statusMap];
        return (
          <Tag color={config.color} icon={config.icon}>
            {config.text}
          </Tag>
        );
      },
    },
    {
      title: '收件人数',
      dataIndex: 'recipients',
      key: 'recipients',
    },
    {
      title: '成功/失败',
      key: 'result',
      render: (record: any) => (
        <span>
          <span style={{ color: '#52c41a' }}>{record.success}</span>
          {' / '}
          <span style={{ color: '#ff4d4f' }}>{record.failed}</span>
        </span>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
  ];

  return (
    <PageContainer
      header={{
        title: '数据概览',
        breadcrumb: {},
      }}
    >
      <div style={{ padding: '0 24px' }}>
        {/* 统计卡片 */}
        <Row gutter={16} style={{ marginBottom: 24 }}>
          <Col span={6}>
            <Card>
              <Statistic
                title="今日发送"
                value={1128}
                prefix={<MailOutlined />}
                valueStyle={{ color: '#1890ff' }}
                suffix="封"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="发送成功"
                value={1050}
                prefix={<CheckCircleOutlined />}
                valueStyle={{ color: '#3f8600' }}
                suffix="封"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="发送失败"
                value={78}
                prefix={<CloseCircleOutlined />}
                valueStyle={{ color: '#cf1322' }}
                suffix="封"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="成功率"
                value={93.1}
                prefix={<RiseOutlined />}
                valueStyle={{ color: '#3f8600' }}
                suffix="%"
              />
            </Card>
          </Col>
        </Row>

        {/* 发送统计 */}
        <Row gutter={16} style={{ marginBottom: 24 }}>
          <Col span={12}>
            <Card title="本月发送统计" style={{ height: 300 }}>
              <div style={{ padding: '20px 0' }}>
                <div style={{ marginBottom: 16 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                    <span>营销邮件</span>
                    <span>75%</span>
                  </div>
                  <Progress percent={75} strokeColor="#1890ff" />
                </div>
                <div style={{ marginBottom: 16 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                    <span>通知邮件</span>
                    <span>60%</span>
                  </div>
                  <Progress percent={60} strokeColor="#52c41a" />
                </div>
                <div style={{ marginBottom: 16 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                    <span>系统邮件</span>
                    <span>45%</span>
                  </div>
                  <Progress percent={45} strokeColor="#fa8c16" />
                </div>
              </div>
            </Card>
          </Col>
          <Col span={12}>
            <Card title="系统状态" style={{ height: 300 }}>
              <div style={{ padding: '20px 0' }}>
                <Row gutter={16}>
                  <Col span={12}>
                    <Statistic
                      title="活跃数据源"
                      value={5}
                      valueStyle={{ color: '#3f8600' }}
                    />
                  </Col>
                  <Col span={12}>
                    <Statistic
                      title="邮件模板"
                      value={12}
                      valueStyle={{ color: '#1890ff' }}
                    />
                  </Col>
                </Row>
                <Row gutter={16} style={{ marginTop: 24 }}>
                  <Col span={12}>
                    <Statistic
                      title="待发送任务"
                      value={3}
                      valueStyle={{ color: '#fa8c16' }}
                    />
                  </Col>
                  <Col span={12}>
                    <Statistic
                      title="SMTP配置"
                      value={2}
                      valueStyle={{ color: '#722ed1' }}
                    />
                  </Col>
                </Row>
              </div>
            </Card>
          </Col>
        </Row>

        {/* 最近任务 */}
        <Card title="最近发送任务">
          <Table
            columns={columns}
            dataSource={recentTasks}
            pagination={false}
            size="middle"
          />
        </Card>
      </div>
    </PageContainer>
  );
};

export default Dashboard;
